'use strict';

//全局参数初始化
var count = 0;
var editors = new Map();
CodeMirror.modeURL = "../mode/%N/%N.js";

//构建代码编辑器元素
function createCodeElement()
{
  var container = $("<div></div>");
  container.attr('type', 'code');
  container.attr('contenteditable', 'false');
  container.attr('style', 'margin-top: 15px;margin-bottom:15px;margin-left:5px; margin-right: 10px;font-size:18px;');
  var selectMode = $("<select></select>");
  selectMode.attr('id', 'selectMode' + count);
  selectMode.change(function(){setMode(this)});
  selectMode.append("<option value=\"text/x-csrc\" selected>C</option>");
  selectMode.append("<option value=\"text/x-c++src\">C++</option>");
  selectMode.append("<option value=\"text/x-csharp\">C#</option>");
  selectMode.append("<option value=\"text/x-go\">Go</option>");
  selectMode.append("<option value=\"text/html\">Html</option>");
  selectMode.append("<option value=\"text/x-java\">Java</option>");
  selectMode.append("<option value=\"text/javascript\">Javascript</option>");
  selectMode.append("<option value=\"text/x-mysql\">MySQL</option>");
  selectMode.append("<option value=\"text/x-php\">PHP</option>");
  selectMode.append("<option value=\"text/x-plsql\">PLSQL</option>");
  selectMode.append("<option value=\"text/x-python\">Python</option>");
  selectMode.append("<option value=\"text/x-sql\">SQL</option>");
  selectMode.append("<option value=\"text/x-vb\">VB.NET</option>");
  selectMode.append("<option value=\"text/xml\">XML</option>");
  var selectTheme = $("<select></select>");
  selectTheme.attr('id', 'selectTheme' + count);
  selectTheme.change(function(){setTheme(this);});
  selectTheme.attr('style', 'margin-left: 10px;margin-bottom: 10px;');
  selectTheme.append("<option selected>eclipse</option>");
  selectTheme.append("<option>dracula</option>");
  selectTheme.append("<option>base16-light</option>");
  selectTheme.append("<option>base16-dark</option>");
  selectTheme.append("<option>3024-day</option>");
  selectTheme.append("<option>3024-night</option>");
  selectTheme.append("<option>colorforth</option>");
  var closeBtn = $("<span></span>");

  closeBtn.attr('id', 'closeBtn' + count);
  closeBtn.attr('class', 'iconfont icon-close');

  closeBtn.attr('style', 'margin-left: 20px;cursor:default;');
  var textArea = $("<textarea></textarea");
  textArea.attr('id', 'code' + count);
  textArea.attr('style', "width:500px; height:100px;font-size: 24px;color: #000;font-family: '楷体'; text-align: left;");
  container.append(selectMode, selectTheme, closeBtn, textArea);

  closeBtn.click(()=>container.remove());
  return container;
}

//插入代码编辑器元素
function insertCode() 
{
  var container = createCodeElement();
  var [,,ele] = cursorInfo();
  var newPara = $("<p></p>");
  newPara.append(createSpan());
  ele.after(container, newPara);

  initCode();
  count++; 
}

//初始化代码编辑器
function initCode() {
  var editor = CodeMirror.fromTextArea($("#code" + count)[0], {
    lineNumbers: true,
    matchBrackets: true,
    indentUnit: 4,
    mode: "text/x-java",
    //在缩进时把 n*tab宽度个空格替换成n个tab字符
    indentWithTabs: true,
    // styleActiveLine: true,
    //括号匹配
    matchBrackets: true,
  });
  editors.set(count + "", editor);
}


//切换字体大小,切换字体不做独立处理,作为统一处理,放在设置里
//提供的字体大小选择如下,默认为24
// var selectFontSize = $("<select></select>");
//   selectFontSize.attr('id', 'selectFontSize' + count);
//   selectFontSize.change(function(){setFontSize(this)});
//   selectFontSize.append("<option>12</option>");
//   selectFontSize.append("<option>16</option>");
//   selectFontSize.append("<option>20</option>");
//   selectFontSize.append("<option selected>24</option>");
//   selectFontSize.append("<option>28</option>");
//   selectFontSize.append("<option>32</option>");
//   selectFontSize.append("<option>36</option>");
/**
function setFontSize(obj) {
  var fontSize = obj.options[obj.selectedIndex].textContent;
  $(".CodeMirror").css({ "font-family": "monospace","height": "300px","color": "black","direction":"ltr","font-size":fontSize+"px" });
}
**/


//切换主题
function setTheme(obj) {
  var themeId = obj.id;
  var editor = editors.get(themeId.substring(11, themeId.length + 1));
  var theme = obj.options[obj.selectedIndex].textContent;
  editor.setOption("theme", theme);
}

//切换模式
function setMode(obj) {
  var modeId = obj.id;
  var editorid = modeId.substring(10, modeId.length + 1);

  var editor = editors.get(modeId.substring(10, modeId.length + 1));

  var val = obj.value, m, mode, spec;

  if (m = /.+\.([^.]+)$/.exec(val)) 
  {
    var info = CodeMirror.findModeByExtension(m[1]);
    if (info) {
      mode = info.mode;
      spec = info.mime;
    }
  } 
  else if (/\//.test(val)) 
  {
    var info = CodeMirror.findModeByMIME(val);
    if (info) {
      mode = info.mode;
      spec = val;
    }
  } 
  else {
    mode = spec = val;
  }
  if (mode) 
  {
    editor.setOption("mode", spec);
    CodeMirror.autoLoadMode(editor, mode);
  } 
  else {
    console.log("Could not find a mode corresponding to " + val);
  }
}
